<script setup lang="ts">
import { ref, watch } from 'vue'
import { roleStore } from '@/stores/role'
// 走马灯
import Carousel from '@/components/Carousel/Carousel.vue'
import FlexRight from '@/components/Echart/flexGlobal/flexRight.vue'
// 新老会员业绩占比
import NewOldPie from '@/components/PermissionsModule/Performance/components/NewOldPie.vue'
// 零售业绩与拓展业绩占比
import RetailPie from '@/components/PermissionsModule/Performance/components/RetailPie.vue'
// 业绩同比
import countryPerformanceYoY from '@/components/PermissionsModule/Performance/components/countryPerformanceYoY.vue'
// 业绩环比
import nationalPerformanceMoM from '@/components/PermissionsModule/Performance/components/nationalPerformanceMoM.vue'
// 去年对比
import nationalComparisonLastYear from '@/components/PermissionsModule/Performance/components/nationalComparisonLastYear.vue'
// 业绩达成率
import nationalPerformanceGauge from '@/components/PermissionsModule/Performance/components/nationalPerformanceGauge.vue'
// 全球业绩趋势
import globalPerformanceLine from '@/components/PermissionsModule/Performance/components/globalPerformanceLine.vue'
// 各国家业绩同比
import countryYoY from '@/components/PermissionsModule/Performance/components/countryYoY.vue'
// 各国家业绩环比
import countryRatio from '@/components/PermissionsModule/Performance/components/countryRatio.vue'
// 各大区业绩占比
import AreaPie from '@/components/PermissionsModule/Performance/components/AreaPie.vue'
// 全球各区业绩环比
import globalPerformanceRatio from '@/components/PermissionsModule/Performance/components/globalPerformanceRatio.vue'
// 全球各区业绩同比
import globalPerformanceYoY from '@/components/PermissionsModule/Performance/components/globalPerformanceYoY.vue'
const store = roleStore() as any
const { role1, role2, role3 } = store
const userRole = store.role1

const rule = ref() // 1 普通 2 中级 3 高级
const info = () => {
  rule.value = userRole
}
info()

const components = {
  FlexRight,
}
// 将 upDataDemo 方法暴露给父组件
defineExpose({
  FlexRight,
})
</script>

<template>
  <FlexRight />
  <Carousel class="carousel" :interval="5000">
    <globalPerformanceLine />
  </Carousel>
  <Carousel class="carousel" :interval="5000">
    <countryPerformanceYoY />
    <nationalPerformanceMoM />
    <nationalComparisonLastYear />
    <countryYoY />
    <countryRatio />
    <globalPerformanceRatio />
    <globalPerformanceYoY />
  </Carousel>
  <Carousel class="carousel" :interval="5000">
    <nationalPerformanceGauge />
    <NewOldPie />
    <RetailPie />
    <AreaPie />
  </Carousel>
</template>

<style lang="scss" scoped>
.carousel {
  width: 100%;

  :deep(.el-carousel__container) {
    height: 260px;
  }
}
</style>
